import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Checkbox, Alert } from 'antd';
import { getPageQuery } from '../../utils/utils';
import { setAuthority } from '../../utils/authority';
import { reloadAuthorized } from '../../utils/Authorized';
import Login from '../../components/Login';
import styles from './Login.less';

const { UserName, Password, Submit } = Login;

@connect(({ loading }) => ({
  submitting: !!loading.effects['login/login'],
}))
export default class LoginPage extends Component {
  state = {
    autoLogin: true,
  };

  handleSubmit = (err, { userName, password }) => {
    const { dispatch, history } = this.props;
    if (!err) {
      dispatch({
        type: 'login/login',
        payload: {
          params: {
            username: userName,
            password,
          },
          onSuccess: () => {
            dispatch({
              type: 'user/fetch',
              payload: {
                onSuccess: () => {
                  setAuthority('user');
                  reloadAuthorized();
                  const urlParams = new URL(window.location.href);
                  let { redirect } = getPageQuery();
                  if (redirect) {
                    const redirectUrlParams = new URL(redirect);
                    if (redirectUrlParams.origin === urlParams.origin) {
                      redirect = redirect.substr(urlParams.origin.length);
                      if (redirect.startsWith('/#')) {
                        redirect = redirect.substr(2);
                      }
                    } else {
                      window.location.href = redirect;
                      return;
                    }
                  }
                  history.replace(redirect || '/');
                },
              },
            });
          },
        },
      });
    }
  };

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };

  renderMessage = content => {
    return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
  };

  render() {
    const { submitting } = this.props;
    const { autoLogin } = this.state;

    return (
      <div className={styles.main}>
        <Login onSubmit={this.handleSubmit}>
          <UserName name="userName" placeholder="测试：mars" />
          <Password name="password" placeholder="测试：123" />
          <div>
            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
              自动登录
            </Checkbox>
          </div>
          <Submit loading={submitting}>登录</Submit>
          <div className={styles.other}>
            <Link className={styles.register} to="/user/register">
              注册账户
            </Link>
          </div>
        </Login>
        <Alert
          style={{ marginTop: '50px' }}
          type="warning"
          message="说明：建议使用手机测试，不建议使用电脑测试。如果使用电脑测试，建议打开开发者工具(快捷键ctrl+shift+i)的响应式布局功能,方能测试完整功能！"
        />
      </div>
    );
  }
}
